<template>
  <div class="detail">
    <el-steps :active="1" align-center>
      <el-step title="提交订单" description="Some description" />
      <el-step title="支付订单" description="Some description" />
      <el-step title="平台发货" description="Some description" />
      <el-step title="确认收货" description="Some description" />
      <el-step title="完成评价" description="Some description" />
    </el-steps>

    <div class="tablebox">
      <div class="container">
        <div class="header">
          <div class="status">当前订单的状态</div>
          <div class="control">
            <el-button>订单跟踪</el-button>
            <el-button>发送站内信</el-button>
            <el-button>备注订单</el-button>
          </div>
        </div>
        <div class="baseinfo">
          <span>基本信息</span>
        </div>
        <table class="tableone">
          <tr class="one">
            <td>订单编号</td>
            <td>发货单流水号</td>
            <td>用户账号</td>
            <td>支付方式</td>
            <td>订单来源</td>
            <td>订单类型</td>
          </tr>
          <tr>
            <td>{{orderList?.orderSn}}</td>
            <td>22</td>
            <td>{{orderList?.memberUsername}}</td>
            <td>44</td>
            <td>{{orderList?.sourceType===0?'pc订单':'APP订单'}}</td>
            <td>{{orderList?.orderType===0?'正常订单':'秒杀订单'}}</td>
          </tr>
          <tr class="three">
            <td>配送方式</td>
            <td>物流单号</td>
            <td>自动收货时间</td>
            <td>订单可得优币</td>
            <td>订单可得值</td>
            <td>活动信息</td>
          </tr>
          <tr>
            <td>{{orderList?.deliveryCompany}}</td>
            <td>{{orderList?.deliverySn}}</td>
            <td>{{orderList?.autoConfirmDay}}天</td>
            <td>{{orderList?.growth}}</td>
            <td>{{orderList?.integration}}</td>
            <td class="activeinfo">{{orderList?.promotionInfo}}</td>
          </tr>
        </table>
        <div class="baseinfo">
          <span>收货人信息</span>
        </div>
        <table class="tableone">
          <tr class="one">
            <td>收货人</td>
            <td>手机号码</td>
            <td>邮政编码</td>
            <td>收货地址</td>
          </tr>
          <tr>
            <td>{{orderList?.receiverName}}</td>
            <td>{{orderList?.receiverPhone}}</td>
            <td>{{orderList?.receiverPostCode}}</td>
            <td>{{ orderList?.receiverProvince }} {{ orderList?.receiverCity }} {{ orderList?.receiverRegion }} {{orderList?.receiverDetailAddress}}</td>
          </tr>
        </table>
        <div class="baseinfo">
          <span>商品信息</span>
        </div>
        <table class="tableone">
          <tr class="one">
            <td>商品图片</td>
            <td>商品名称</td>
            <td>价格/货号</td>
            <td>属性</td>
            <td>数量</td>
            <td>小计</td>
          </tr>
          <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
            <td>44</td>
            <td>55</td>
            <td>66</td>
          </tr>
        </table>
        <div class="totalprice">
          合计：<span>￥{{ orderList?.totalAmount }}</span>
        </div>
        <div class="baseinfo">
          <span>费用信息</span>
        </div>
        <table class="tableone">
          <tr class="one">
            <td>商品合计</td>
            <td>运费</td>
            <td>优惠券</td>
            <td>积分抵扣</td>
          </tr>
          <tr>
            <td>{{orderList?.totalAmount}}</td>
            <td>{{orderList?.freightAmount}}</td>
            <td>{{orderList?.discountAmount}}</td>
            <td>{{orderList?.integrationAmount}}</td>
          </tr>
          <tr class="three">
            <td>活动优惠</td>
            <td>折扣金额</td>
            <td>订单总金额</td>
            <td>应付款金额</td>
          </tr>
          <tr>
            <td>{{orderList?.promotionAmount}}</td>
            <td>{{orderList?.discountAmount}}</td>
            <td>{{orderList?.totalAmount}}</td>
            <td>{{ orderList?.payAmount }}</td>
          </tr>
        </table>
        <div class="baseinfo">
          <span>操作信息</span>
        </div>
        <table class="tableone">
          <tr class="one">
            <td>操作者</td>
            <td>操作时间</td>
            <td>订单状态</td>
            <td>付款状态</td>
            <td>发货状态</td>
            <td>备注</td>
          </tr>
          <tr>
            <td>11</td>
            <td>{{formateDate(orderList?.modifyTime)}}</td>
            <td>
              <span v-if="orderList?.status===0">待付款</span>
          <span v-else-if="orderList?.status===1">待发货</span>
          <span v-else-if="orderList?.status===2">已发货</span>
          <span v-else-if="orderList?.status===3">已完成</span>
          <span v-else-if="orderList?.status===4">已关闭</span>
          <span v-else ="orderListstatus===1">无效订单</span>
            </td>
            <td>44</td>
            <td>55</td>
            <td>66</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {getOrderDetailListApi} from "./api/index"
import { formateDate } from "@/utils";
import { useRoute } from "vue-router";
const route = useRoute()

const orderList = ref< IOrderDetialModel<HistoryList,OrderItemList>>({})
getOrderDetailListApi(route.query.id).then((res)=>{
  orderList.value = res.data
  console.log(orderList.value,6666666);
  console.log(route.query.id);
  
  
})
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style scoped lang="less">
.detail {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;

  .tablebox {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    .container {
      padding: 20px;
      .header {
        display: flex;
        justify-content: space-between;
        background: #f2f6fc;
    height: 80px;
    margin: -20px -20px 0;
    padding: 20px 20px 0;
    line-height: 80px;
      }
      .baseinfo {
        margin-top: 20px;
      }
      .tableone 
      {
        border-collapse: collapse;
        width: 100%;
        margin-top: 20px;
        table-layout: fixed;
        td{
          border: 1px solid #ebeef5;
          border-collapse: collapse;
          height: 60px;
          line-height: 40px;
          text-align: center;
        }
        .activeinfo{
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width: 50px;
        }
        .one,
        .three{
          background: #f2f6fc;
        }
      }
      .totalprice{
        float: right;
        margin: 20px;
      }
    }
  }
}
</style>
